<template>
  <el-card>
    <template #header>
      <div class="header-container">
        <span class="header-title">ZUUU</span>
        <el-tag type="warning" v-if="isModeError" class="header-message">
          模式设置错误
        </el-tag>
      </div>
    </template>
    <!-- <div>ZUUU</div> -->
    <el-form label-width="100px">
      <el-form-item label="运行方向">
        <el-radio-group v-model="AMANStore.inputs.ZUUU.direction">
          <el-radio value="N">向北</el-radio>
          <el-radio value="S">向南</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="runwayNames.west + '跑道用途'">
        <el-checkbox-group v-model="AMANStore.inputs.ZUUU.usages.westRunway">
          <el-checkbox label="D">起飞</el-checkbox>
          <el-checkbox label="A">落地</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item :label="runwayNames.east + '跑道用途'">
        <el-checkbox-group v-model="AMANStore.inputs.ZUUU.usages.eastRunway">
          <el-checkbox label="D">起飞</el-checkbox>
          <el-checkbox label="A">落地</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <span>&emsp;</span>
        <!-- <el-skeleton :rows="0" animated /> -->
      </el-form-item>
      <el-form-item
        :label="runwayNameQ == '' ? '起飞忽略' : runwayNameQ + '跑道起飞'"
      >
        <el-slider
          v-model="AMANStore.inputs.ZUUU.departure"
          :min="0"
          :max="maxDeparture"
          style="width: 200px; margin-left: 3px"
          :disabled="runwayNameQ == ''"
        />
      </el-form-item>
      <el-form-item label="时间粒度">
        <el-slider
          v-model="AMANStore.inputs.ZUUU.timeSpan"
          :min="20"
          :max="60"
          :step="10"
          :marks="timeSpanMarks"
          show-stops
          style="width: 200px; margin-left: 3px"
        />
      </el-form-item>

      <el-divider />

      <el-form-item label="模式代码">
        <span class="text-modecode">{{ modeCode }}</span>
      </el-form-item>

      <el-form-item label="匹配N值">
        <span>
          <span class="text-nvalue">{{ matchedItemCapacity }}</span>
          <span class="text-nunit"
            >&nbsp;/&nbsp;{{ AMANStore.inputs.ZUUU.timeSpan }}min</span
          >
        </span>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref, computed } from "vue";
import useAMANStore from "@/store/aman.js";
const AMANStore = useAMANStore();
const runwayNames = computed(() => {
  return {
    west: AMANStore.inputs.ZUUU.direction == "N" ? "02L" : "20R",
    east: AMANStore.inputs.ZUUU.direction == "N" ? "02R" : "20L",
  };
});

const isModeError = computed(
  () =>
    AMANStore.inputs.ZUUU.usages.westRunway.length +
      AMANStore.inputs.ZUUU.usages.eastRunway.length <
      2 ||
    AMANStore.inputs.ZUUU.usages.westRunway.length +
      AMANStore.inputs.ZUUU.usages.eastRunway.length ==
      4 ||
    (AMANStore.inputs.ZUUU.usages.westRunway.length == 1 &&
      AMANStore.inputs.ZUUU.usages.eastRunway.length == 1 &&
      AMANStore.inputs.ZUUU.usages.westRunway[0] ==
        AMANStore.inputs.ZUUU.usages.eastRunway[0]) ||
    (AMANStore.inputs.ZUUU.usages.westRunway.length == 1 &&
      AMANStore.inputs.ZUUU.usages.eastRunway.length == 1 &&
      !isStandalone.value)
);

const isStandalone = computed(
  () =>
    AMANStore.inputs.ZUUU.usages.westRunway.length == 1 &&
    AMANStore.inputs.ZUUU.usages.eastRunway.length == 1 &&
    ((AMANStore.inputs.ZUUU.direction == "N" &&
      AMANStore.inputs.ZUUU.usages.westRunway[0] == "D" &&
      AMANStore.inputs.ZUUU.usages.eastRunway[0] == "A") ||
      (AMANStore.inputs.ZUUU.direction == "S" &&
        AMANStore.inputs.ZUUU.usages.westRunway[0] == "A" &&
        AMANStore.inputs.ZUUU.usages.eastRunway[0] == "D"))
);

const runwayNameQ = computed(() =>
  isModeError.value
    ? ""
    : AMANStore.inputs.ZUUU.direction == "N"
    ? AMANStore.inputs.ZUUU.usages.westRunway.length == 2
      ? "02L"
      : AMANStore.inputs.ZUUU.usages.eastRunway.length == 2
      ? "02R"
      : ""
    : AMANStore.inputs.ZUUU.usages.westRunway.length == 2
    ? "20R"
    : AMANStore.inputs.ZUUU.usages.eastRunway.length == 2
    ? "20L"
    : ""
);

const modeCode = computed(() => {
  if (isModeError.value) {
    return "---X---X";
  }
  let w = "";
  let e = "";
  if (AMANStore.inputs.ZUUU.direction == "N") {
    if (AMANStore.inputs.ZUUU.usages.westRunway.length == 0) {
      w = "";
    } else if (AMANStore.inputs.ZUUU.usages.westRunway.length == 2) {
      w = "02LQ";
    } else if (AMANStore.inputs.ZUUU.usages.westRunway[0] == "A") {
      w = "02LA";
    } else if (AMANStore.inputs.ZUUU.usages.westRunway[0] == "D") {
      w = "02LD";
    }
    if (AMANStore.inputs.ZUUU.usages.eastRunway.length == 0) {
      e = "";
    } else if (AMANStore.inputs.ZUUU.usages.eastRunway.length == 2) {
      e = "02RQ";
    } else if (AMANStore.inputs.ZUUU.usages.eastRunway[0] == "A") {
      e = "02RA";
    } else if (AMANStore.inputs.ZUUU.usages.eastRunway[0] == "D") {
      e = "02RD";
    }
  } else {
    if (AMANStore.inputs.ZUUU.usages.westRunway.length == 0) {
      w = "";
    } else if (AMANStore.inputs.ZUUU.usages.westRunway.length == 2) {
      w = "20RQ";
    } else if (AMANStore.inputs.ZUUU.usages.westRunway[0] == "A") {
      w = "20RA";
    } else if (AMANStore.inputs.ZUUU.usages.westRunway[0] == "D") {
      w = "20RD";
    }
    if (AMANStore.inputs.ZUUU.usages.eastRunway.length == 0) {
      e = "";
    } else if (AMANStore.inputs.ZUUU.usages.eastRunway.length == 2) {
      e = "20LQ";
    } else if (AMANStore.inputs.ZUUU.usages.eastRunway[0] == "A") {
      e = "20LA";
    } else if (AMANStore.inputs.ZUUU.usages.eastRunway[0] == "D") {
      e = "20LD";
    }
  }
  return w + e;
});

const matchedItems = computed(() => {
  if (!AMANStore.schemes.ZUUU || isModeError.value) {
    return null;
  }
  let matchedList = AMANStore.schemes.ZUUU.filter((scheme) =>
    scheme.modeCodes.includes(modeCode.value)
  );
  if (matchedList.length > 0) {
    return matchedList;
  } else {
    return null;
  }
});

const maxDeparture = computed(() =>
  matchedItems.value &&
  matchedItems.value.length > 0 &&
  !isModeError.value &&
  runwayNameQ.value != ""
    ? runwayNameQ.value == "02L" || runwayNameQ.value == "20R"
      ? matchedItems.value[0].westDeparture
      : matchedItems.value[0].eastDeparture
    : 0
);

const matchedItemCapacity = computed(() => {
  if (isStandalone.value) {
    return Math.floor((30 * AMANStore.inputs.ZUUU.timeSpan) / 60);
  } else if (!matchedItems.value || matchedItems.value.length == 0) {
    return "XX";
  } else {
    let matchedItem = null;
    if (runwayNameQ.value == "02L" || runwayNameQ.value == "20R") {
      matchedItem = matchedItems.value.filter(
        (scheme) => scheme.westDeparture == AMANStore.inputs.ZUUU.departure
      );
    } else if (runwayNameQ.value == "02R" || runwayNameQ.value == "20L") {
      matchedItem = matchedItems.value.filter(
        (scheme) => scheme.eastDeparture == AMANStore.inputs.ZUUU.departure
      );
    }
    if (matchedItem && matchedItem.length > 0) {
      return Math.floor(
        ((matchedItem[0].westArrival + matchedItem[0].eastArrival) *
          AMANStore.inputs.ZUUU.timeSpan) /
          60
      );
    }
  }
});

const timeSpanMarks = ref({
  30: {
    label: "30min",
    style: { fontSize: "10px", marginTop: "6px" },
  },
  40: {
    label: "40min",
    style: { fontSize: "10px", marginTop: "6px" },
  },
  60: {
    label: "60min",
    style: { fontSize: "10px", marginTop: "6px" },
  },
});
</script>

<style scoped>
.text-nvalue {
  font-family: "Consolas", "SimHei", sans-serif, monospace;
  font-size: 36px;
  font-weight: bold;
}
.text-nunit {
  font-family: "Consolas", "SimHei", sans-serif, monospace;
  font-size: 18px;
  font-weight: bold;
}
.text-modecode {
  font-family: "Consolas", "SimHei", sans-serif, monospace;
  font-size: 24px;
  font-weight: bold;
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
}

.header-messgae {
  font-size: 16px;
  font-weight: bold;
  color: var(--el-color-warning);
}
</style>
